<template>
 <div class="conten-search">
        <!-- <el-form ref="ruleForm"  :model="form" :rules="rules"> -->
     		<!-- <el-row :gutter="24">
                <el-col :lg="15"  > -->
                      <div class="search-box">
						  <!-- <span class="lable">时间：</span> -->
	 <!-- <el-form-item label="开始时间：" label-width="120px"  prop="startTime"> -->
	   <el-date-picker
        v-model="form.startTime"
        type="date"
        placeholder="开始时间"
        format="YYYY-MM-DD"
         value-format="YYYY-MM-DD"
		 @change="comparison"
         suffix-icon="el-icon-date"
      >
         <!-- <template #default="cell">
        <div class="cell">
          <span class="text">{{ cell.text }}</span>
          <span v-if="isHoliday(cell)" class="holiday" />
        </div>
      </template> -->
      </el-date-picker>
			      	<!-- </el-form-item> -->
					  <span style="margin: 0 1rem;">-</span>
<!-- <el-form-item  prop="endTime"> -->
	   <el-date-picker
        v-model="form.endTime"
        type="date"
        placeholder="开始时间"
		        format="YYYY-MM-DD"
         value-format="YYYY-MM-DD"
		 @change="comparison"
      />
			      	<!-- </el-form-item> -->
					  </div>
					   <!-- </el-col> -->
					                  <!-- <el-col :lg="5"  > -->

            <!-- </el-col> -->
                <!-- <el-col :lg="5" > -->
					<!-- <el-form-item label="省市："  prop="areaIds" label-width="80px"> -->

                    <div class="search-box">
						<!-- <span class="lable">品种：</span> -->
                     <sc-select v-if="varietyshow" v-model="form.areaIds" placeholder="请选择品种"  clearable filterable ></sc-select>
				 	<el-button :style="varietyshow?'margin-left: 2.5rem':''" type="primary" @click="submitForm">查询</el-button>
					<el-button @click="resetForm"  >清空</el-button>
					</div>
              
				    	    <!-- <el-cascader 
	      style="width:100%"
	      size="medium"
	      :options="options"
	      v-model="from.areaIds"
	      @change="chge"
	      placeholder="省 / 市 / 区"
	      :disabled="dialog.inputDisabled"
	      > 
	    </el-cascader> -->
					<!-- </el-form-item> -->

             <!-- </el-col> -->
             <!-- <el-col :lg="6" :class="btnTOP?'m15':''">
             		<el-form-item  label-width="20px">

				</el-form-item> 
             </el-col> -->

				<!-- <el-form-item label="表格" prop="list">
				</el-form-item>
-->


            <!-- <el-col :lg="6">
			</el-col>
                        <el-col :lg="6">
			</el-col> -->
		<!-- </el-row> -->
        			<!-- </el-form> -->
 </div>
</template>

<script>
export default {
	props:{
		  varietyshow: { type: Boolean, default: true },
	},
	data() {
		return {
			form: {
                startTime:'',
				endTime:'',
                areaIds:[],
				// btnTOP:false
			},
		}
	},
	created(){
        //   if (window.screen.width < 500) { 
		// 	  console.log(this.btnTOP)
        //              this.btnTOP = true
        //       }else{
				   
        //              this.btnTOP = false
		// 			 console.log(this.btnTOP)
        //      }
	},
	mounted(){
    // window.addEventListener('resize', () => {
    //         if (window.screen.width < 500) { 
    //                  this.btnTOP = true
					 
    //           }else{
    //                  this.btnTOP = false
    //          }
    //   })
	},
	methods: {
		submitForm() {
		console.log(this.form)
		this.comparison(this.form.startTime,this.form.endTime)
		this.$emit('search',this.form)
			// this.$refs.ruleForm.validate((valid) => {
			// 	if (valid) {
			// 		alert('请看控制台输出')
			// 		console.log(this.form)
			// 	} else {
			// 		return false
			// 	}
			// })

		},
		resetForm() {
			// this.$refs.ruleForm.resetFields()
			this.form.startTime = ''
			this.form.endTime = ''
			this.form.areaIds = []
			this.$emit('search',this.form)
		},
		// 开始时间不能晚于结束时间
		comparison(){
			console.log(this.form)
            if(this.form.startTime!==''&&this.form.endTime!==''){
          var start = new Date(this.form.startTime).getTime();; //时间对象
		  var end = new Date(this.form.endTime).getTime(); //时间对象
		  console.log(this.form.startTime,this.form.endTime,end,start)
                    if(end<start){
                        this.$alert( '结束时间不能早于开始时间', "提示", {type: 'error'})
						this.form.endTime = ''
					}
			}
		}

	}

}
</script>

<style scoped>
.from-se{
    display: flex;
    height: 100%;
}
.conten-search{
    width: 100%;
    /* padding-top: 20px; */
}
/deep/.el-form-item{
  margin: 0 !important;
}
.el-button+.el-button{
	margin-left: 2.5rem;
}
.m15{
margin-top: 15px;
}
/deep/ .el-date-editor.el-input, .el-date-editor.el-input__wrapper{
	width: 12.33rem  !important;
}
/deep/ .el-input__wrapper{
	width: 12.33rem  !important;
}
/deep/ .el-select__input{
	width: 12.33rem  !important;
}
.search-box{
		margin-top: 15px;
	display: flex;
    align-items: center;
justify-content: flex-start;
}
.lable{
width: 40px;
margin-left: 15px;
margin-right: 4px;
font-size: 14px;
font-weight: normal;
color: #979797;

}
    /deep/.el-input__prefix {
       position: absolute;
        left: 10.33rem; 
        top: 0;
     }
</style>